import * as echarts from 'echarts';
import { useRef, useEffect } from 'react';
import { geoJson } from './constants';
const initOption = {
  title: {
    text: '厂区地图',
    left: 'center',
    textStyle: {
      color: '#000'
    }
  },
  tooltip: {
    backgroundColor: 'rgba(21, 24, 45, 0.9)', // 提示框浮层的背景颜色。
    textStyle: {
      // 提示框浮层的文本样式。
      color: '#fff',
      fontSize: 14
    },
    extraCssText: 'border-color: rgba(21, 24, 45, 0.9);',
    formatter: function (params) {
      //数据格式化
      const val = params.value ? params.value : 0;
      if (params.value) {
        return params.name + '<br />' + params.seriesName + '：' + val + '%';
      } else {
        return '暂无数据';
      }
    }
  },
  visualMap: {
    min: 0,
    // max: topNumber,
    left: 'left',
    top: 'bottom',
    // text: [topNumber + '%', bottomNumber + '%'], //取值范围的文字
    inRange: {
      color: ['#D2DDFF', '#6E92FF'] //取值范围的颜色
    },
    show: true //图注
  },
  geo: {
    map: 'china',
    roam: false, //不开启缩放和平移
    zoom: 1.23, //视角缩放比例
    label: {
      normal: {
        show: true,
        fontSize: '10',
        color: 'rgba(0,0,0,0.7)'
      }
    },
    itemStyle: {
      normal: {
        borderColor: 'rgba(0, 0, 0, 0.2)'
      },
      emphasis: {
        areaColor: '#4BD6C7', //鼠标选择区域颜色
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 20,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  },
  series: [
    {
      name: '人口',
      type: 'map',
      geoIndex: 0,
      // data: props.data
      data: []
    }
  ]
};
export default function ChinaMap({ option, width = '100%', height = '100%' }) {
  const ref = useRef(null);
  let mapInstance;

  const renderMap = () => {
    if (ref.current) {
      // 重新创建图表，而是复用该图表实例，提升性能
      const renderedMapInstance = echarts.getInstanceByDom(ref.current);
      if (renderedMapInstance) {
        mapInstance = renderedMapInstance;
      } else {
        mapInstance = echarts.init(ref.current);
      }

      mapInstance.setOption(initOption);
    }
  };
  // 页面初始化时，开始渲染图表
  useEffect(() => {
    //默认注册全国地图
    echarts.registerMap('china', geoJson);
    renderMap();
  }, []);
  useEffect(() => {
    window.onresize = function () {
      // 调用 echarts实例上 resize 方法
      mapInstance?.resize();
    };
    return () => {
      // 销毁实例，销毁后实例无法再被使用。
      mapInstance && mapInstance.dispose();
    };
  }, []);

  return (
    <div
      ref={ref}
      style={{
        width: width,
        height: height,
        background: '#f7f9ff',
        padding: '30px 0'
      }}
    />
  );
}
